<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>财务</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col> 
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>
                <!--搜索部分-->
                <el-header class="search">
                    <el-input v-model="search" style="width: 240px" placeholder="请输入持有人姓名" />
                    <el-button type="primary" @click="searchUser">搜索</el-button>
                </el-header>
                <!--刷新部分-->
                <el-header class="refresh">
                    <el-button type="info" @click="handleRefresh">
                       <el-icon><Refresh /></el-icon>
                       刷新
                    </el-button>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="orderCode" label="订单编号" width="25%" ></el-table-column>
                    <el-table-column prop="username" label="昵称" width="10%" ></el-table-column>
                    <el-table-column prop="phone" label="手机号" width="10%" ></el-table-column>
                    <el-table-column prop="money" label="支付金额/元" width="10%" ></el-table-column>
                    <el-table-column prop="payMethod" label="交易方式" width="10%" ></el-table-column>
                    <el-table-column prop="payTime" label="购买时间" width="20%" ></el-table-column>
                    <el-table-column prop="remarks" label="备注" width="15%" ></el-table-column>
                </el-table>
                 <div class="demo-pagination-block">
                    <el-pagination
                    v-model:current-page="pageIndex"
                    v-model:page-size="pageSize" 
                    :page-sizes="[10, 20, 50, 100]" 
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount" 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
// 引入缺失的图标组件（避免报错）
import { Fold, Refresh } from '@element-plus/icons-vue'
import { getHolderList } from '@/components/Finance/DeviceStatisics'

// 搜索栏
const search = ref('')

// 表格数据
const tableData = ref([])

// 分页核心参数（规范命名）
const pageIndex = ref(1)    // 当前页码（默认1）
const pageSize = ref(20)    // 每页条数（默认20，与分页组件绑定）
const totalCount = ref(0)   // 总数据条数（从接口获取）
const size = ref('small')   // 分页组件尺寸
const disabled = ref(false) // 是否禁用分页
const background = ref(true)// 是否显示背景

// 刷新页面函数
const handleRefresh = () => {
  // 刷新后重置分页到第一页，重新加载数据
  pageIndex.value = 1
  pageSize.value = 20
  List()
}

// 核心：请求参数（每次请求前动态拼接最新参数）
const getRequestParams = () => {
  return {
    pageIndex: pageIndex.value, // 最新页码
    pageSize: pageSize.value,   // 最新页大小
    username: search.value      // 搜索关键词（如有）
  }
}

// 获取列表数据（每次都用最新参数）
const List = async () => {
  try {
    const params = getRequestParams() // 动态获取最新参数
    console.log('请求参数：', params) // 调试用，可删除
    let res = await getHolderList(params)
    if (res.code === 200) {
      tableData.value = res.dataset.dataset.list || [] // 避免空数组报错
      totalCount.value = res.dataset.dataset.totalSize || 0 // 同步真实总条数
    } else {
      tableData.value = []
      totalCount.value = 0
      ElMessage.error('获取数据失败')
    }
  } catch (err) {
    console.error('请求失败：', err)
    tableData.value = []
    totalCount.value = 0
    ElMessage.error('网络错误，请重试')
  }
}

// 搜索功能
const searchUser = () => {
  pageIndex.value = 1 // 搜索后重置到第一页
  List()
}

// 分页方法：页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val // 更新页大小
  pageIndex.value = 1  // 页大小改变时，默认回到第一页
  List() // 用新参数请求数据
}

// 分页方法：页码改变
const handleCurrentChange = (val) => {
  pageIndex.value = val // 更新页码
  List() // 用新参数请求数据
}

// 页面加载时初始化数据
onMounted(() => {
  List()
})
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
}
.breadcrumb{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}
.user-info{
    display: flex;
    align-items: center;
    gap: 8px;
}
.username{
    color: #666;
    font-size: 14px;
}
.white{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 10px !important; /* 优化：顶部空白高度 */
    border-bottom: none !important;
}
/*内容部分*/
.el-main{
    padding: 20px; /* 优化：添加内边距 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 修复：表格左对齐 */
    background-color: #fff;
    min-height: calc(100vh - 100px);
}
/*搜索部分*/
.search{
    width: 100%;
    border: none;
    margin: 0 0 20px 0; /* 优化：间距 */
    display: flex;
    align-items: center;
    gap: 10px;
}
/*添加/刷新部分*/
.refresh{
    width: 100%;
    border: none;
    margin: 0 0 20px 0; /* 优化：间距 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*表格部分*/
:deep(.el-table) {
    width: 100% !important;
    margin-bottom: 20px; /* 优化：与分页器间距 */
    
    .el-table__header-wrapper,
    .el-table__body-wrapper {
        width: 100% !important;
    }
    
    .el-table__header {
        width: 100% !important;
    }
    
    .el-table__body {
        width: 100% !important;
    }
    
    .el-table__row {
        height: 60px !important; /* 优化：行高更合理 */
    }
    
    .el-table__header th,
    .el-table__body td {
        text-align: center;
        font-size: 14px;
    }
}
/*分页器*/
.demo-pagination-block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: auto; /* 优化：底部对齐 */
}
</style>